<template>
	<view class="content">
		<view class="loveTitle">
			<up-text align="center" @click="lovePopupOPen" :lines="2" :text="loveTitle" />
		</view>
		<up-popup safeAreaInsetBottom :show="lovePopupShow" mode="bottom" @close="lovePopupClose">
			<view class="lovePopup">
				<text>情话</text>
				<view class="lovePopupTitle" @click="lovePopupOPen">
					<up-text align="center" :text="loveTitle" />
				</view>
				<view class="love-popup-btns">
					<up-button class="love-popup-btn" text="关闭" size="normal" type="info"
						@click="lovePopupClose"></up-button>
					<view style="width: 40%; padding: 0 20px;">
						<up-copy :content="loveTitle">
							<up-button @click="lovePopupClose" class="love-popup-btn1" text="" size="normal"
								type="info">复制
							</up-button>
						</up-copy>
					</view>

				</view>
			</view>
		</up-popup>
		<view style="margin-top: 15px;">
			<up-swiper :list="swiperList" keyName="image" showTitle :autoplay="false" circular></up-swiper>
		</view>

		<view style="margin-top:20px">
			<up-button type="primary" @click="jump">臭宝惹我生气,我要惩罚他!</up-button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { getSayloveApi } from '@/request/app'
// 情话弹出层
const lovePopupShow = ref(false)
// 情话title
const loveTitle = ref('报告!今天也很爱你!')
const lovePopupOPen = () => {
	lovePopupShow.value = true
	uni.hideTabBar()
}
const lovePopupClose = () => {
	lovePopupShow.value = false
	uni.showTabBar({ animation: true })
}
onMounted(async () => {
	// 获取情话
	const res = await getSayloveApi()
	loveTitle.value = res.data
})
const swiperList = ref([
	{
		image: 'http://720cxl.oss-cn-nanjing.aliyuncs.com/aurora/articles/c835bdec668238fc9f8fac971682c913.jpg',
		title: '昨夜星辰昨夜风，画楼西畔桂堂东',
	},
	{
		image: 'http://720cxl.oss-cn-nanjing.aliyuncs.com/aurora/articles/6d0a9498daa91668edca987707b73c4c.jpeg',
		title: '身无彩凤双飞翼，心有灵犀一点通',
	},
	{
		image: 'http://720cxl.oss-cn-nanjing.aliyuncs.com/aurora/articles/2762f9d4e57696bdc751591dd8e14bcd.jpg',
		title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
	},
])
const jump = () => {
	uni.navigateTo({
		url: "/pages/stink_baby/punishment"
	})
}
</script>

<style scoped lang="scss">
.content {
	padding: 0 15px;

	.loveTitle {
		margin: 10px auto;
		padding: 10px 3px;
		border-radius: 10px;
		text-align: center;
		background-color: rgb(247, 247, 247);
	}

	.lovePopupTitle {
		width: 80%;
		margin: 0 auto;
		padding-bottom: 10px;
		border-radius: 10px;
	}

	.lovePopup {
		padding-bottom: 10px;

		text {
			margin: 0 auto;
			display: block;
			text-align: center;
			height: 44px;
			line-height: 44px;
			padding: 15px 20px 0px;
			color: black;
		}

		.love-popup-btns {
			display: flex;
			align-items: center;

			.love-popup-btn {
				width: 40%;
				border-radius: 20px;
			}

			.love-popup-btn1 {
				border-radius: 20px;
				background: #000;
				color: white;
			}


		}
	}
}
</style>